<template>
  <div style="width: 100%; height: 100%">
    <!-- 执行步骤信息-->
    <el-row>
      <el-col :span="5">
        <el-table
          :data="FModuleDataList"
          border
          @row-click="onDataRowClick"
          :row-class-name="tableRowClassName"
          row-key="FDataID"
          default-expand-all
          highlight-current-row
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="FTreeCode" label="树形节点" width="150">
          </el-table-column>
          <el-table-column prop="FDataCaption" label="步骤名称" width="150">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-button @click="appendData()">新增步骤</el-button>
          <el-button @click="appenDataChild()">新增子步骤</el-button>
          <el-button @click="delData()">删除步骤</el-button>
          <el-button @click="upData()">上移步骤</el-button>
          <el-button @click="downData()">下移步骤</el-button>
          <el-button @click="clearData()">清除全部步骤</el-button>
        </el-row>
        <el-row>
          <div class="my-block">
            <!-- 模块信息 -->
            <table border="1">
              <colgroup>
                <col style="width: 16rem; max-width: 16rem" />
                <col style="width: 32rem" />
                <col style="width: 16rem; max-width: 16rem" />
                <col style="width: 32rem" />
                <col style="width: 16rem; max-width: 16rem" />
                <col style="width: 32rem" />
              </colgroup>
              <tbody>
                <tr>
                  <td class="title"><span style="color: red"> * </span>序号</td>
                  <td>
                    <el-input v-model="FIndexData.FOrderNo"></el-input>
                  </td>
                  <td class="title"><span style="color: red"> * </span>标签</td>
                  <td>
                    <el-input v-model="FIndexData.FDataCaption"></el-input>
                  </td>
                  <td class="title">
                    <span style="color: red"> * </span>json名称
                  </td>
                  <td>
                    <el-input v-model="FIndexData.FDataName"></el-input>
                  </td>
                </tr>
                <tr>
                  <td class="title">
                    <span style="color: red"> * </span>表名(存储)
                  </td>
                  <td>
                    <el-input v-model="FIndexData.FDataTableName"></el-input>
                  </td>
                  <td class="title"><span style="color: red"> * </span>主键</td>
                  <td>
                    <el-input v-model="FIndexData.FDataPrimaryKey"></el-input>
                  </td>
                  <td class="title">
                    <span style="color: red"> * </span>打开数据模式
                  </td>
                  <td>
                    <el-select
                      v-model="FIndexData.FDataOpenMode"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in FOpenModeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ item.value }}</span
                        >
                      </el-option>
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <td class="title">分页条数</td>
                  <td>
                    <el-input v-model="FIndexData.FDataPageSize"></el-input>
                  </td>
                  <td class="title">输出格式</td>
                  <td colspan="3">
                    <el-select
                      v-model="FIndexData.FDataJsonFormat"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in FDataJsonFormat"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ item.value }}</span
                        >
                      </el-option>
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <td class="title">最大影响行数</td>
                  <td>
                    <el-input v-model="FIndexData.FMaxAffectRows"></el-input>
                  </td>
                  <td class="title">必须影响行数</td>
                  <td>
                    <el-input v-model="FIndexData.FMustAffectRows"></el-input>
                  </td>
                  <td class="title">账套</td>
                  <td>
                    <el-input v-model="FIndexData.FDataZTCode"></el-input>
                  </td>
                </tr>
                <tr>
                  <td colspan="8">
                    <el-row>
                      <div>SQL语句</div>
                    </el-row>
                    <el-row>
                      <el-input
                        type="textarea"
                        :rows="10"
                        placeholder="请输入SQL语句"
                        v-model="FIndexData.FDataSQL"
                      >
                      </el-input>
                    </el-row>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script  lang="ts">
import {
  TModuleDataSet,
  constHelper,
  evenDataSetIndexChange,
  evenDels,
} from "@/baselib/module/BaseClass";
import { Options, Vue } from "vue-class-component";
//配合着用
@Options({})
export default class TFrmModuleDataList extends Vue {
  private _FModuleDataList: TModuleDataSet[] = [];
  public get FModuleDataList(): TModuleDataSet[] {
    return this._FModuleDataList;
  }
  public set FModuleDataList(qDataList: TModuleDataSet[]) {
    this._FModuleDataList = qDataList;
    if (this._FModuleDataList.length == 0) {
      this.FIndexData = new TModuleDataSet();
      this._FModuleDataList.push(this.FIndexData);
    }
    this.FIndexData = this._FModuleDataList[0];
  }
  // public FModuleDataList: TModuleDataSet[] = []; //执行步骤数
  private _FIndexData: TModuleDataSet = new TModuleDataSet();
  public get FIndexData(): TModuleDataSet {
    return this._FIndexData;
  }
  public set FIndexData(qIndexData: TModuleDataSet) {
    this._FIndexData = qIndexData;
    if (this.FOnIndexDataChange != undefined) {
      this.FOnIndexDataChange(qIndexData);
    }
  }

  //private FIndexData: TModuleDataSet = new TModuleDataSet(); //当前选中的执行步骤
  private FOpenModeList: any[] = constHelper.TMyOpenMode;
  private FDataJsonFormat: any[] = constHelper.TMyDataJsonFormat;
  public FOnIndexDataChange?: evenDataSetIndexChange;
  public FOnDel?: evenDels;
  private onDataRowClick(row: TModuleDataSet) {
    this.FIndexData = row;
  }
  private tableRowClassName(row: any): string {
    let lTemp = row.row as TModuleDataSet;
    if (!this.$myStrHelper.stringIsEmptyYW(lTemp.FDataID)) {
      if (lTemp.FDataID == this.FIndexData.FDataID) {
        return "success-row";
      }
    }
    if (!this.$myStrHelper.stringIsEmptyYW(lTemp.myTempID)) {
      if (lTemp.myTempID == this.FIndexData.myTempID) {
        return "success-row";
      }
    }
    return "";
  }
  private appendData() {
    var tempData = new TModuleDataSet();
    tempData.myTempID = this.$myStrHelper.getGUID();
    //tempData.FOrderNo = this.FModuleDataList.length + 1;
    this.FModuleDataList.push(tempData);
    this.FIndexData = tempData;
  }
  private appenDataChild() {
    if (
      this.FIndexData.children == null ||
      this.FIndexData.children == undefined
    ) {
      this.FIndexData.children = [];
    }
    var tempData = new TModuleDataSet();
    tempData.myTempID = this.$myStrHelper.getGUID();
    tempData.FDataCaption = "新建子节点";
    //tempData.FOrderNo = this.FModuleDataList.length + 1;
    this.FIndexData.children.push(tempData);
  }
  private delData() {
    let tempI = -1;
    for (var i = this.FModuleDataList.length - 1; i >= 0; i--) {
      var item = this.FModuleDataList[i];
      if (!this.$myStrHelper.stringIsEmptyYW(this.FIndexData.FDataID)) {
        if (item.FDataID == this.FIndexData.FDataID) {
          tempI = i;
          this.FModuleDataList.splice(i, 1);
          if (this.FOnDel != undefined) {
            this.FOnDel(item.FDataID);
          }
          break;
        }
      } else {
        if (item.myTempID == this.FIndexData.myTempID) {
          tempI = i;
          this.FModuleDataList.splice(i, 1);
          break;
          0;
        }
      }
    }
    if (tempI >= 0) {
      if (this.FModuleDataList.length == 0) {
        this.appendData();
      } else if (this.FModuleDataList.length > tempI) {
        this.FIndexData = this.FModuleDataList[tempI];
      } else {
        this.FIndexData = this.FModuleDataList[tempI - 1];
      }
    }
  }
  private upData() {
    if (this.FModuleDataList.length <= 1) {
      return;
    }
    if (this.FIndexData == undefined) {
      return;
    }
    var tempIndex = -1;
    for (var i = this.FModuleDataList.length - 1; i >= 0; i--) {
      var item = this.FModuleDataList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexData.FDataID)) {
        if (item.FDataID == this.FIndexData.FDataID) {
          tempIndex = i;
          break;
        }
      } else {
        if (item.myTempID == this.FIndexData.myTempID) {
          tempIndex = i;
          break;
        }
      }
    }
    if (tempIndex > 0) {
      var lUp = this.FModuleDataList[tempIndex - 1];
      var lNow = this.FModuleDataList[tempIndex];
      var lUpOrder = lUp.FOrderNo;
      lUp.FOrderNo = lNow.FOrderNo;
      lNow.FOrderNo = lUpOrder;
      this.FModuleDataList[tempIndex - 1] = lNow;
      this.FModuleDataList[tempIndex] = lUp;
    }
  }
  private downData() {
    if (this.FModuleDataList.length <= 1) {
      return;
    }
    if (this.FIndexData == undefined) {
      return;
    }
    var tempIndex = -1;
    for (var i = this.FModuleDataList.length - 1; i >= 0; i--) {
      var item = this.FModuleDataList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexData.FDataID)) {
        if (item.FDataID == this.FIndexData.FDataID) {
          tempIndex = i;
          break;
        }
      } else {
        if (item.myTempID == this.FIndexData.myTempID) {
          tempIndex = i;
          break;
        }
      }
    }
    if (tempIndex < this.FModuleDataList.length - 1) {
      var lUp = this.FModuleDataList[tempIndex + 1];
      var lNow = this.FModuleDataList[tempIndex];
      var lUpOrder = lUp.FOrderNo;
      lUp.FOrderNo = lNow.FOrderNo;
      lNow.FOrderNo = lUpOrder;
      this.FModuleDataList[tempIndex + 1] = lNow;
      this.FModuleDataList[tempIndex] = lUp;
    }
  }
  private clearData() {
    for (var i = this.FModuleDataList.length - 1; i >= 0; i--) {
      if (this.FOnDel != undefined) {
        this.FOnDel(this.FModuleDataList[i].FDataID);
      }
      this.FModuleDataList.splice(i, 1);
    }
    // this.FIndexData = null;
  }
}
</script>

<style>
table {
  border-collapse: collapse;
}

table,
table tr td {
  border: 1px solid #ccc;
}

.title {
  background-color: #d9d9d9;
  padding-left: 10px;
}
.el-table .success-row {
  background: #94b0ec;
}
</style>
